<template>
  <div class="page-container">
    <!--添加赠品-优惠券-->
    <el-dialog title="查看优惠券" :inline="true" width="60%" :visible.sync="giftCouponsVisible" :close-on-click-modal="false">
      <div v-if="false">
        <el-form :model="giftCouponsForm" label-width="120px" ref="giftProductForm" :size="size">
          <div style="display: flex;align-content: flex-start;flex-wrap: wrap;">
            <el-form-item label="优惠券id：" prop="couponId">
              <el-input v-model="giftCouponsForm.couponId" style="width: 215px" auto-complete="off" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div style="padding-top: 45px;">
        <el-table :data="giftCouponsTableData" border style="width: 100%">
          <el-table-column width="285px" align="center" label="优惠券id">
            <template slot-scope="scope">
              <span>{{ scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column width="285px" align="center" label="优惠券名称">
            <template slot-scope="scope">
              <span>{{ scope.row.couponName}}</span>
            </template>
          </el-table-column>
          <el-table-column width="285px" align="center" label="面值">
            <template slot-scope="scope">
              <span>{{ scope.row.couponAmount}}</span>
            </template>
          </el-table-column>
          <el-table-column width="285px" align="center" label="有效时间">
            <template slot-scope="scope">
              <span>{{ scope.row.couponUseStartTime}}-{{ scope.row.couponUseEndTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="每人限领（张）" align="center">
            <template slot-scope="scope"  align="center">
              <el-input v-model="scope.row.individualLimit" disabled="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="使用条件" align="center">
            <template slot-scope="scope"  align="center">
              <span>{{scope.row.couponUseDesc}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="总量限制/已发行量" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.grantTotalNum}}/{{ scope.row.grantNum}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" class="textButton" @click="deleteGiftItem(2, scope.row.itemId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChangeForGiftCoupons"
            :current-page="giftCouponsForm.start"
            :page-size="giftCouponsForm.limit"
            :total="giftCouponsTableDataSize"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChangeForGiftCoupons"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="giftCouponsVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--审核弹框-->
    <el-dialog title="管理员备注" width="28%" :visible.sync="dialogVisibleAdmin" :close-on-click-modal="false">
      <el-form :model="adminDataForm" label-width="10%" :size="size"
               label-position="right" inline>
        <el-form-item label="备注：">
          <div style="width:100%;">
            <el-input
              type="textarea"
              placeholder="请输入备注"
              v-model="adminDataForm.auditRemark"
              :rows="4">
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="submitFormAdminNotPass" type="primary">不通过</el-button>
        <el-button :size="size" type="primary" @click.native="submitFormAdmin">通过</el-button>
      </div>
    </el-dialog>

    <!--保存模板弹窗-->
    <el-dialog title="模板名称设置" width="30%"  :visible.sync="templateDialogVisible" :close-on-click-modal="false">
      <el-form :model="templateDataForm" label-width="120px" :size="size">
        <el-form-item label="模板名称：">
          <el-input
            placeholder="请输入模板名称"
            v-model="templateDataForm.templateName" maxlength="20">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="templateDialogVisible=false" >取消</el-button>
        <el-button :size="size" type="primary" @click.native="saveTemplate">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看赠品" :inline="true" width="60%" :visible.sync="giftProductVisible" :close-on-click-modal="false">
      <div>
        <el-form :model="seeGiftProductForm" label-width="100px" ref="seeGiftProductForm" :size="size">
          <div style="display: flex;align-content: flex-start;flex-wrap: wrap;">
            <el-form-item label="商品名称：" prop="chineseName">
              <el-input v-model="seeGiftProductForm.mpName" style="width: 215px" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品编号：" prop="code">
              <el-input v-model="seeGiftProductForm.mpCode" style="width: 215px" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div style="margin-left: 21px;">
            <!--            <el-button  size="mini" @click="productFormFind()">查询</el-button>-->
            <el-button  size="mini" @click="checkPro(null)">查询</el-button>
            <el-button  size="mini" @click="resetForm('seeGiftProductForm')" v-if="false">重置</el-button>
          </div>
        </el-form>
      </div>
      <div style="padding-top: 45px;">
        <el-table :data="giftProductTableData" border style="width: 100%">
          <el-table-column prop="id" label="商品商家id" align="center"></el-table-column>
          <el-table-column prop="code" label="商品编码" align="center"></el-table-column>
          <el-table-column prop="chineseName" label="商品中文名称" align="center"></el-table-column>
          <el-table-column prop="unitsName" label="计量单位" align="center"></el-table-column>
          <el-table-column prop="storeName" label="店铺名称" align="center"></el-table-column>
          <el-table-column prop="merchantName" label="商家名称" align="center"></el-table-column>
          <el-table-column prop="giftNum" label="单次赠送数量" align="center">
            <template slot-scope="scope"  prop="giftNum" align="center">
              <el-input v-model="scope.row.giftNum" disabled="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="channelMerchantLimit" label="商家单渠道限购" align="center">
            <template slot-scope="scope"  prop="channelMerchantLimit" align="center">
              <el-input v-model="scope.row.channelMerchantLimit" disabled="true"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="channelIndividualLimit" align="center" label="个人单渠道限购">
            <template slot-scope="scope">
              <el-input v-model="scope.row.channelIndividualLimit" disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column prop="channelStoreLimit" label="店铺单渠道限购" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.channelStoreLimit" disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column  label="操作" align="center" >
            <template slot-scope="scope">
              <el-button type="text" class="textButton" @click="deleteGiftItem(1, scope.row.itemId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChangeForSeeGiftProduct"
            :current-page="seeGiftProductForm.start"
            :page-size="seeGiftProductForm.limit"
            :total="seeGiftProductTableDataSize"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChangeForSeeGiftProduct"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="giftProductVisible = false">取消</el-button>
<!--        <el-button :size="size" type="primary" @click.native="giftProductVisible = false" @click="giftProductTableData2Click" :loading="giftProductEditLoading">确定</el-button>-->
      </div>
    </el-dialog>

    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;width: 100%;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" class="border" style="margin-bottom: 15px;">
        <div style="width: 100%;">
          <el-form-item style="width:32%">
            <span style="color: #999;">活动名称：</span>
            <span style="margin-left:10px;">{{activityData.promName}}</span>
          </el-form-item>
          <el-form-item style="width:32%">
            <span style="color: #999;">活动ID：</span>
            <span style="margin-left:10px;">{{activityData.id}}</span>
          </el-form-item>
          <el-form-item style="width:32%">
            <span style="color: #999;">当前状态：</span>
            <span style="margin-left:10px;" v-if="activityData.status == 0">待提交</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 1">待提交</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 2">待审核</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 3">未开始</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 4">审核不通过</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 5">进行中</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 6">已过期</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 7">已关闭</span>
            <span style="margin-left:10px;" v-else-if="activityData.status == 8">已结束</span>
            <span style="margin-left:10px;" v-else>未知状态</span>
          </el-form-item>
        </div>
      </el-form>
      <el-form :inline="true" :model="filters" :size="size" ref="filters" style="text-align: center;">
        <span v-if="activityData.status == 2">
              <div style="margin-top:20px;" v-if="shenhe == 0">
              <kt-button type="primary" plain :size="size" @click="shenheHuodong(1)" perms="market:single:verify" label="审核"></kt-button>
                </div>
             </span>
        <span v-if="activityData.status == 1">
         <div style="margin-top:20px;" v-if="shenhe == 0">
          <kt-button type="primary" plain :size="size" @click="shenheHuodong(0)" perms="market:single:submit" label="提交审核"></kt-button>
        </div>
        <div style="margin-top:20px;" v-if="shenhe == 1">
            <kt-button type="primary" plain :size="size" @click="shenheHuodong(1)" perms="market:single:verify" label="审核"></kt-button>
        </div>
       </span>
        <span>
          <div style="margin-top:20px; text-align:center">
            <kt-button type="primary" plain :size="size" @click="templateDialogVisible = true" perms="market:single:addtemp" label="保存模板"></kt-button>
          </div>
        </span>
      </el-form>
    </div>
    <div class="tab-container">
      <el-alert :closable="false" style="background-color: #ffffff;color: #ffffff;" title="" type="success" />
      <el-tabs type="border-card">
        <el-tab-pane label="活动规则">
          <div>
            <form class="form-horizontal ">
              <div class="pdL10 border-left font-bold mgB15 ng-binding">基本信息</div>
              <div class="form-group">
                <!--活动名称-->
                <label class="col-sm-2 control-label ng-binding" ng-show="promotionDetailContent.promotionMethod != 17">活动名称:</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType == 13 &amp;&amp; promotionDetailContent.promotionMethod == 17">定金支付时间</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  {{activityData.promName}}
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group">
                <!--活动时间-->
                <label class="col-sm-2 control-label ng-binding" >活动时间:</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  {{activityData.startTime}} 至 {{activityData.endTime}}
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group">
                <!--活动时间-->
                <label class="col-sm-2 control-label ng-binding" >活动标签:</label>
                <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  {{activityData.tagName}}
                </div>
              </div>

              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding">活动规则</div>
              <div class="form-group ng-scope">
                <!--活动类型(促销类型)-->
                <label class="col-sm-2 control-label ng-binding">活动类型:</label>
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  {{getFrontPromType(activityData.frontPromType)}}
                </div>
              </div>
              <!-- <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group ng-scope">
                活动形式
                <label class="col-sm-2 control-label ng-binding">活动形式:</label>
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  <span>报名型</span>
                </div>
              </div> -->
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group">
                <label class="col-sm-2 control-label ng-binding">活动规则说明:</label>
                <div class="col-sm-5 pdt3px ng-binding">
                  {{activityData.description}}
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group">
                <label class="col-sm-2 control-label ng-binding">店铺区域:</label>
                <div class="col-sm-5 pdt3px ng-binding">
                  全国
                </div>
              </div>

              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">交易规则</div>
              <div class="line line-dashed b-b line-lg  ng-scope" v-if="false"></div>

              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group ng-scope" >
                <!--是否包邮-->
                <label class="col-sm-2 control-label ng-binding" >是否包邮:</label>
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  <span v-if="activityData.parcelsFlag == 0"> 否</span>
                  <span v-else> 是</span>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType == 1 || promotionDetailContent.promotionType == 14">
                <label class="col-sm-2 control-label ng-binding">超限规则:</label>
                <div class="col-sm-10 pdt3px themeTextColor ng-binding">
                  <span  v-if="activityData.foldingFlag==1" class="ng-binding ng-scope">按原价购买</span>
                  <span  v-else class="ng-binding ng-scope">不可购买</span>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div v-show="false" class="">
                <div class="col-sm-2 control-label">
                  <label class="ng-binding"> 供应商分摊比例：</label>
                </div>
                <div class="col-sm-10 control-label">
                  <table border="1">
                    <thead>
                    <tr>
                      <th class="minw110 textCenter">供应商ID</th>
                      <th class="minw110 textCenter">供应商名称</th>
                      <th class="minw110 textCenter">分摊比例</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- ngRepeat: e in promotionDetailContent.selectedSupplierList -->
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div class="pdL10 border-left font-bold mgB15 ng-binding">
                参与条件
              </div>
              <div class="line line-dashed b-b line-lg  ng-scope"></div>
              <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
                <!--活动渠道-->
                <div class="line line-dashed b-b line-lg" ng-show="promotionDetailContent.channelCodes.length > 0"></div>
                <div class="form-group ng-scope" ng-if="promotionDetailContent.channelCodes.length > 0">
                  <label class="col-sm-2 control-label ng-binding">活动渠道:</label>

                  <div class="col-sm-10 pdt3px">
                    <span v-for="(item) in (channelCodes)" :key="item.id" class="ng-binding ng-scope">{{item.childName}} &nbsp;</span>
                  </div>
                </div>

                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group">
                  <label class="col-sm-2 control-label ng-binding">新老用户:</label>
                  <div class="col-sm-10 pdt3px">
                    <span v-for="(item) in (activityData.proUserType + '').split('|')" :key="item" class="ng-binding ng-scope">{{getProUserType(item)}} &nbsp;</span>
                  </div>
                </div>
                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group" v-if="false">
                  <label class="col-sm-2 control-label ng-binding">会员类型:</label>
                  <div class="col-sm-10 pdt3px">
                    <span v-for="(item) in (activityData.proMemberType + '').split('|')" :key="item" class="ng-binding ng-scope">{{getProMemberType(item)}} &nbsp;</span>
                  </div>
                </div>
                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group">
                  <label class="col-sm-2 control-label ng-binding">用户区域:</label>
                  <div class="col-sm-10 pdt3px">
                    全国
                  </div>
                </div>
                <!-- 会员等级(修改) -->
                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group" v-if="false">
                  <div ng-repeat="e in memberLevelArray" class="ng-scope">
                    <label class="col-sm-2 control-label ng-binding ng-scope" ng-if="$index==0">会员等级:</label>
                    <div class="col-sm-10 pdt3px">
                      <span v-for="(item) in (activityData.proMemberLevel + '').split('|')" :key="item" class="ng-binding ng-scope">{{getProMemberLevel(item)}} &nbsp;</span>
                    </div>
                  </div>
                </div>
                <div class="line line-dashed b-b line-lg  "></div>
                <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">
                  <!--备注-->
                  <label class="col-sm-2 control-label ng-binding">备注</label>
                  <div class="col-sm-10 pdt3px themeTextColor">
                    <quill-editor
                      v-model="activityData.remark"
                      ref="myQuillEditor"
                      style="height: 300px;"

                    >{{activityData.remark}}</quill-editor>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="参与商家/店铺" @click="getMerchantOrStoreList()">
          <el-tabs type="border-card">
            <el-tab-pane label="商家">
              <el-table :data="businessList" border style="width: 100%">
                <el-table-column prop="id" label="商品编码"></el-table-column>
                <el-table-column prop="name" label="商家名称"></el-table-column>
                <el-table-column prop="type" label="组织分类"></el-table-column>
              </el-table>
              <!--分页栏-->
              <div class="toolbar" style="padding:10px;" v-if="businessList.length > 0">
                <el-pagination
                  @size-change="businesshandleSizeChange"
                  @current-change="businesshandleCurrentChange"
                  :current-page="businessForm.pageNo"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="businessForm.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="businessListTotal">
                </el-pagination>
              </div>
            </el-tab-pane>

            <el-tab-pane label="店铺">
              <el-table :data="shopList" border style="width: 100%">
                <el-table-column prop="id" label="店铺编码"></el-table-column>
                <el-table-column prop="name" label="店铺名称"></el-table-column>
                <el-table-column prop="type" label="店铺类型"></el-table-column>
              </el-table>
              <!--分页栏-->
              <div class="toolbar" style="padding:10px;" v-if="shopList.length > 0">
                <el-pagination
                  @size-change="shophandleSizeChange"
                  @current-change="shophandleCurrentChange"
                  :current-page="shopForm.pageNo"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="shopForm.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="shopListTotal">
                </el-pagination>
              </div>
            </el-tab-pane>  
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="参与商品">
          <div style=" height: 40px;">
            
            <!-- <el-button size="mini" style="float: left;" type="primary" @click="revokeProduct()">撤出商品</el-button> -->
            <el-button size="mini" style="float: left;"  type="primary" @click="searchMerchantProductFlag = !searchMerchantProductFlag">搜索</el-button>
          
            </div>
                <!-- 搜索框 -->
                <div v-if="searchMerchantProductFlag">
                      <el-form :inline="true" :model="merchantProductSearchForm" size="mini" ref="merchantProductSearchForm">
                      <el-form-item  label="商家">
                        <template>
                          <el-select v-model="merchantProductSearchForm.merchantId" placeholder="请选择">
                            <el-option
                              v-for="item in merchantTableData2"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </template>
                      </el-form-item>
                      <el-form-item label="商品编码" prop="mpCode">
                        <el-input v-model="merchantProductSearchForm.mpCode"></el-input>
                      </el-form-item>
                        <el-form-item label="商品名称" prop="mpName">
                          <el-input v-model="merchantProductSearchForm.mpName"></el-input>
                        </el-form-item>
                        <el-form-item  prop="mpName">
                          <el-button type="primary" size="mini" @click="merchantProductSearch()">查询</el-button>
                          <el-button type="primary" size="mini" @click="resetForm('merchantProductSearchForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            <div>
            <div>
              <el-table :data="merchantProductTableData" border style="width: 100%"  :size="size"
                        row-key="id"
                        border
                        default-expand-all
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
              <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="mpCode" label="商品编码" width="180"></el-table-column>
                  <el-table-column prop="mpName" label="商品名称" width="180"></el-table-column>
                  <el-table-column prop="mpParentId" label="父商品ID"></el-table-column>
                  <el-table-column prop="merchantId" label="商家ID"></el-table-column>
                  <el-table-column prop="merchantName" label="商家名称"></el-table-column>
                  <el-table-column prop="storeName" label="店铺名称"></el-table-column>
                  <el-table-column prop="salePriceWithTax" label="统一零售价（元）"></el-table-column>
                <el-table-column prop="contentValue" label="特价" align="center" v-if="frontPromType == 1">
                    <template slot-scope="scope">
                        <span>{{ scope.row.contentValue}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="contentValue" label="折扣(折)" align="center" v-if="frontPromType == 2">
                  <template slot-scope="scope">
                    <span>{{ scope.row.contentValue}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="contentValue" label="直降(元)" align="center" v-if="frontPromType == 3">
                  <template slot-scope="scope">
                    <span>{{ scope.row.contentValue}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="channelMerchantLimit" label="商家单渠道限购" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.channelMerchantLimit}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="channelStoreLimit" label="店铺单渠道限购" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.channelStoreLimit}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="individualLimit" label="个人限购" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.individualLimit}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="orderLimit" label="订单限购" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.orderLimit}}</span>
                  </template>
                </el-table-column>
                </el-table>
              <!--分页栏-->
              <div class="toolbar" style="padding:10px;">
                <el-pagination
                  @size-change="handleSizeChangeMerchantProductTableData"
                  @current-change="handleCurrentChangeMerchantProductTableData"
                  :current-page="merchantProductSearchForm.start"
                  :page-sizes="[10, 20, 30, 40]"
                  style="float:right;"
                  :page-size="merchantProductSearchForm.limit"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="merchantProductTableDataTotal">
                </el-pagination>
              </div>
            </div>

          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import { format } from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { darkmagenta } from 'color-name';
  import tabPane from './components/TabPaneCreateGroupon'
  import qs from 'qs';
  import { promTypeConverter, frontPromTypeConverter,channelCodeConverter,proPlatformConverter, proUserTypeConverter,proMemberTypeConverter ,proMemberLevelConverter} from "@/market/dict/marketDict";
  import marketRequest from "@/market/request/marketRequest";
  export default {
    name: 'Tab',
    components: {
      tabPane ,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
        channelCodes:[{}],
        businessListTotal:0,
        shopListTotal:0,
         businessForm:{
          promotionId : this.promotionId,
          merchantType: "1",
          pageNo: 1,
          pageSize: 10,
        },
        shopForm:{
          promotionId : this.promotionId,
          merchantType: "2",
          pageNo: 1,
          pageSize: 10,
        },
        merchantProductTableDataTotal: 0,
        mainProductForm:{
          promotionId: this.promotionId,
          mutexFlag: null,
          start:1,
          limit:10,
          orderBys:{
            "f":"create_time",
            "s":"desc"
          }
        },
        frontPromType:'',
        merchantProductTableData:[{}],
        merchantProductSearchForm: {
          merchantId: null,
          mpCode: null,
          mpName: null,
        },
        searchMerchantProductFlag: false,
        giftCouponsTableData: [],
        giftCouponsVisible: false,
        giftCouponsTableDataSize: 0,
        giftCouponsForm: {
          start:1,
          limit:10,
        },
        seeGiftProductTableDataSize: 0,
        giftProductVisible: false,
        giftProductTableData: [],
        currentRule:{},
        seeGiftProductForm:{
          start:1,
          limit:10,
          mpCode:null,
          mpName:null
        },
        giftProductForm:{
          start:1,
          limit:10,
          productName:"",
          productNo:"",
          barCode:"",
          chineseName:"",
          code:""
        },
        giftRuleTable:[],
        templateDataForm: {
          templateName: null,
        },
        templateDialogVisible:false,
        tableDataData:[],
        adminDataForm:{
          auditRemark:""
        },
        dialogVisibleAdmin: false,
        shenhe:0,
        size: "small",
        filters: {},
        multipleSelection: [],
        giftProductEditLoading: false,
        businessList: [{"id": "001", "name": "张小二服饰", "type": "自营商家"}],
        shopList: [{"id": "161616", "name": "张小二bbc店铺", "type": "直营"}],
        tableData: [{
          "id": 1912250010887324,
          "productName": "新供应商001",
          "unit": '件',
          "shopName": '张小二服饰',
          "price": 1.2,
          "markdown": 1,
          "shopLimit1": 100,
          "shopLimit2": 100,
          "shopLimit3": 100,
        }],
        promotionId: this.$route.query.value,
        activityData: {
          parcelsFlag:null,
        },
      };
    },
    created: function(){
      let _this = this;
      if(_this.deptType == 0){
         _this.getChildList();
       }
      this.findAllRules();
      
      let callback = res => {
        if (res.code == "0000") {
          _this.activityData = res.data;
        }else{
          
        }
      };
      let params = {"id": this.$route.query.value};
      this.utils.request.promotionDetailById(params, callback);

      this.mainMerchantFormFind();
      this.mainStoreTableDataFormFind();
    },
    methods: {
      //获取子平台列表
      getChildList(){
            let this_=this
            this_.activityData
            let channel = [{childName:"卡奥斯运营平台",id:"179"}];
             this_.utils.request.queryChildList({},res=>{
                if(res.code == '0000' && res.data && res.data.length > 0){
                    channel=res.data;
                    for(let i=0;i<res.data.length;i++){
                       this_.channelCodes.push(res.data[i]);
                    } 
                }
            })
        },
       handleCurrentChangeMerchantProductTableData(pageNum){
        this.merchantProductSearchForm.start = pageNum;
        this.getProductListV2();
      },
      handleSizeChangeMerchantProductTableData(val){
        this.merchantProductSearchForm.limit = val;
        this.merchantProductSearchForm.start = 1;
        this.getProductListV2();
      },
      // 换页刷新
      shophandleSizeChange: function (pageNum) {
        this.shopForm.pageNo = pageNum;
        this.mainMerchantFormFind();
      },
      shophandleCurrentChange(pageSize) {
        this.shopForm.pageNo = 1;
        this.shopForm.pageSize = pageSize;
        this.mainMerchantFormFind();
      },
      // 换页刷新
      businesshandleSizeChange: function (pageNum) {
        this.businessForm.pageNo = pageNum;
        this.mainMerchantFormFind();
      },
      businesshandleCurrentChange(pageSize) {
        this.businessForm.pageNo = 1;
        this.businessForm.pageSize = pageSize;
        this.mainMerchantFormFind();
      },
       // 换条数刷新
      handleChangeForProductNumber: function (pageSize) {
        this.mainProductForm.limit = pageSize;
        this.mainProductForm.start = 1;
        this.mainProductTableDataFormFind();
      },
      //商品列表换页刷新
      handleChangeForProductSingle: function (pageNum) {
        this.mainProductForm.start = pageNum;
        this.mainProductTableDataFormFind();
      },
      //促销商品查询
      getProductListV2(type, searchParm){
        let param = {
          promotionId: this.$route.query.value,
          mutexFlag: type,
          start: 1,
          limit: 100,
        };
        if(searchParm != null){
          param.merchantId = searchParm.merchantId;
          param.mpCode = searchParm.mpCode;
          param.mpName = searchParm.mpName;
        }
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            if(type == 0){
              this_.merchantProductTableData = res.data.rows;
              this_.merchantProductTableDataTotal = res.data.total;
            }else{
              this_.merchantProductTableDataMutex = res.data.rows;
            }
          } else {
          }
        };
         marketRequest.getProductListV3(param, callback);
      },
       //查询活动类型
      promotionDetailById(data){
        let  this_= this;
        let query={};
        query.id=data;
        this_.utils.request.promotionDetailById(query,function(res){
              if(res.code == '0000'){
                 this_.frontPromType=res.data.frontPromType;
              }
            });
      },
      //table的双色条纹
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      //修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color:rgb(250,250,250);'
        }
      },
    // 重置方法
     resetForm(formName) {
        if (this.$refs[formName] != undefined) {
            this.$refs[formName].resetFields();
        }
      },
      //商品搜索方法
      merchantProductSearch(){
        this.getProductListV2(0, this.merchantProductSearchForm)
      },
      deleteGiftItem(type, id){
        let this_ = this;
        let callback = res => {
          if (res.code == "0000") {
            if(type == 1){
              this_.getGiftItemList();
            }else{
              this_.getGiftCouponItemList();
            }
          }
        };
        let param ={
          id: id,
          deleteFlag: 1,
        };
        marketRequest.promotionGiftItemDeleteById(param, callback);
      },
      handleSizeChangeForGiftCoupons: function (pageSize) {
        this.giftCouponsForm.limit = pageSize;
        this.giftCouponsForm.start = 1;
        this.getGiftCouponItemList();
      },
      handleCurrentChangeForGiftCoupons: function (pageNum) {
        this.giftCouponsForm.start = pageNum;
        this.getGiftCouponItemList();
      },
      handleSizeChangeForSeeGiftProduct(pageSize){
        this.seeGiftProductForm.limit = pageSize;
        this.seeGiftProductForm.start = 1;
        this.checkPro(null);
      },
      handleCurrentChangeForSeeGiftProduct(pageNum) {
        this.seeGiftProductForm.start = pageNum;
        this.checkPro(null);
      },

      // 换条数刷新
      handleSizeChangeForGiftProduct: function (pageSize) {
        this.giftProductForm.limit = pageSize;
        this.giftProductForm.start = 1;
        this.giftProductFormFind();
      },
      handleCurrentChangeForGiftProduct: function (pageNum) {
        this.giftProductForm.start = pageNum;
        this.giftProductFormFind();
      },

      checkPro(row) {
        this.currentRule = row;
        if(this.activityData.giftType == 1){//赠商品
          this.giftProductVisible = true;
          this.getGiftItemList();
        }else{//赠优惠券
          this.giftCouponsVisible = true;
          this.getGiftCouponItemList();
        }
      },
      getGiftCouponItemList(){
        let this_ = this;
        //查询promotion_gift_item 列表并赋值给
        let callback = function(res) {
          if (res.code == "0000") {
            this_.giftCouponsTableData = res.data.rows.map((ele, index) => {
              let item = {
                //id: ele.id,
                id: ele.couponId,
                couponName: ele.couponName,
                couponAmount: ele.couponAmount,
                couponUseStartTime: ele.couponUseStartTime,
                couponUseEndTime: ele.couponUseEndTime,
                grantTotalNum: ele.grantTotalNum,
                grantNum: ele.grantNum,
                individualLimit: ele.individualLimit,
                couponUseDesc: ele.couponUseDesc,
                itemId: ele.id,
              };
              return item;
            });
            this_.giftCouponsTableDataSize = res.data.total;
          }
        };
        this.giftCouponsForm.promotionId = this.promotionId;
        this.giftCouponsForm.promotionRuleId = this.currentRule.id;
        this.giftCouponsForm.giftType = 4;
        marketRequest.promotionGiftItemFindByPage(this.giftCouponsForm, callback);
      },
      getGiftItemList(){
        let this_ = this;
        //查询promotion_gift_item 列表并赋值给
        let callback = function(res) {
          if (res.code == "0000") {
            this_.giftProductTableData = res.data.rows.map((ele, index) => {
              let item = {};
              item.id = ele.productId;
              item.code = ele.mpCode;
              item.chineseName = ele.mpName;
              item.storeName = ele.storeName;
              item.merchantName = ele.merchantName;
              item.giftNum = ele.giftNum;
              item.channelMerchantLimit = ele.channelMerchantLimit;
              item.channelStoreLimit = ele.channelStoreLimit;
              item.channelIndividualLimit = ele.channelIndividualLimit;
              item.itemId = ele.id;
              return item;
            });
            this_.seeGiftProductTableDataSize = res.data.total;
          }
        };
        this.seeGiftProductForm.promotionId = this.promotionId;
        this.seeGiftProductForm.promotionRuleId = this.currentRule.id;
        this.seeGiftProductForm.giftType = 1;
        marketRequest.promotionGiftItemFindByPage(this.seeGiftProductForm, callback);
      },
      findAllRules(){
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.giftRuleTable = res.data;
          }
        };
        let param = {
          "promotionId": this.$route.query.value,
          "deleteFlag": 0,
        };
        this.utils.request.promotionRuleFindAll(param, callback);
      },
      //保存模板方法
      saveTemplate(){
        this.$confirm("确认保存为模板吗？", "提示", {
             type: "warning"
         })
        .then(() => {
            let this_ = this;
            let params = Object.assign({}, this_.templateDataForm);
            if(params.templateName == null || params.templateName.trim() == ''){
              this_.$message({message:'模板名称不能为空',type:'error'});return;
            }
            params.promotionId=this.promotionId;
            marketRequest.savePromotionSingleTemplate(params, function(res){
              if(res.code == '0000'){
                this_.$message({message: "操作成功", type: "success"});
                this_.templateDialogVisible=false;
              }else{
                this_.$message({message: "操作失败", type: "error"});
              }
            });
          })
        .catch(() => {
        });
      },
      submitFormAdminNotPass(){
        let this_ = this;
        this.dialogVisibleAdmin = false;

        let callback = res => {
          this_.activityData.status=4;
          console.log(res);
        };
        this.adminDataForm.id = this.promotionId;
        this.adminDataForm.status = 4;
        this.utils.request.promotionUpdate(this.adminDataForm, callback);
        this.shenhe = 0;
      },
      submitFormAdmin(){
        let this_ = this;
        this.dialogVisibleAdmin = false;

        let callback = res => {
          this_.activityData.status=11;
          console.log(res);
        };
        this.adminDataForm.id = this.promotionId;
        this.adminDataForm.status = 11;
        this.utils.request.promotionUpdate(this.adminDataForm, callback);
      },

      shenheHuodong(flag){
        let this_ = this;
        if(flag == 0){

          this.$confirm("是否确认提交审核？", "提示", {
            type: "warning"
          })
            .then(() => {
              this.shenhe = 1;

              let callback = res => {
                this_.activityData.status=2;
                this_.shenhe = 0;
                console.log(res);
              };
              let param ={};
              param.id    =this.promotionId;
              param.status         =2;

              this.utils.request.promotionUpdate(param,callback);

            })
            .catch(() => {
            });
        }else{
          this.shenhe = 2;
          this.dialogVisibleAdmin = true;
        }
      },


      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      revokeProduct() {
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.getMerchantProductList();
          } else {
            //alert("修改失败");
          }
        };
        if (this.multipleSelection.length > 0) {
          let ids = this.multipleSelection.map(item => item.id);
          this.utils.request.promotionRevokeProduct({"mpIds": ids}, callback);
        } else {
          this.$message({message: "操作失败, 请选择要撤出的商品",type: "error"});
        }
      },
      createPage(){
        this.$router.push("/CreatePromotion");
      },
      getProPlatform(code){
        return proPlatformConverter(code);
      },
      getProUserType(code){
        return proUserTypeConverter(code);
      },
      getChannelCodes(code){
        return channelCodeConverter(code);
      },
      getFrontPromType(code){
        return frontPromTypeConverter(code)
      },
      getProMemberType(code){
        return proMemberTypeConverter(code)
      },
      getProMemberLevel(code){
        return proMemberLevelConverter(code)
      },
      getMerchantOrStoreList(){
        alert("aaa");
      },

       //查询绑定关系的商家
      mainMerchantFormFind(){
        var this_ = this;
        let params ={"promotionId" : this.promotionId, "merchantType": "1"};

        this.utils.request.promotionMerchantList(params, function (res) {
          if (res.code == "0000") {
            this_.businessList = res.data.list.map((ele, index) => {
              let merchant = {};
              merchant.id = ele.id;
              merchant.name = ele.merchantName;
              merchant.type = ele.merchantType == '1' ? '自营商家' : '入驻商家';
              return merchant
            })
            this_.businessListTotal = res.data.totalCount;
          }
        });
      },
      //查询绑定关系的店铺
      mainStoreTableDataFormFind(){
        let params ={"promotionId" : this.promotionId, "merchantType": "2"};
        var  this_ = this;
        this.utils.request.promotionMerchantList(params, function (res) {
          if (res.code == "0000") {
            this_.shopList = res.data.list.map((ele, index) => {
              let store = {};
              store.id = ele.storeId;
              store.name = ele.storename;
              store.type = ele.storeType == '1' ? "自营店铺" : "入驻店铺";
              return store
            });
            this_.shopListTotal = res.data.totalCount;
          }
        });
      },
      getMerchantProductList(){
        let callback2 = res => {
          if (res.code == "0000") {
            this.tableDataData=res.data.rows;
          }
        };
        var param2 ={};
        param2.promotionId = this.$route.query.value;
        param2.start=1;
        param2.limit=10;
        this.utils.request.promotionMerchantProductList(param2, callback2);
      },
    },
    mounted() {
      // let callback2 = res => {
      //   if (res.code == "0000") {
      //     this.tableDataData=res.data.rows;
      //   }
      // };
      // var param2 ={};
      // param2.promotionId = this.$route.query.value;
      // param2.start=1;
      // param2.limit=10;
      // this.utils.request.promotionMerchantProductList(param2, callback2);
      this.promotionDetailById(this.$route.query.value);
      this.getProductListV2(0,null);
       //当前登录用户身份为母平台才获取子平台列表
//         if(this.deptType == 0){
//             this.getChildList();
//         }
    }
    
  };
</script>

<style scoped lang='scss'>
  .border {
    color: #666666;
    font-size: 16px;
    font-weight: bold;
    line-height: 28px;
    border-bottom: 1px solid #666666;
    padding-bottom: 3px;
  }
  .pdL10 {
    padding-left: 10px!important;
  }
  .mgB15 {
    margin-bottom: 15px!important;
  }
  .border-left {
    border-left: 3px #ddd solid !important;
  }
  .font-bold {
    font-weight: 700;
  }
  .form-group {
    margin-bottom: 15px!important;
    margin-right: -0px!important;
    margin-left: -263px!important;
  }
  .form-horizontal .control-label {
    padding-top: 5px;
    margin-bottom: 0;
    text-align: right;
  }
  .form-horizontal div {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif, "Regular", "Microsoft YaHei";
    font-size: 12px;
    color: #666666;
    background-color: transparent;
    -webkit-font-smoothing: antialiased;
    line-height: 1.42857143;
    word-wrap: break-word;
  }
  .form-horizontal .control-label {
    padding-top: 3px !important;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  /* .col-sm-10 {
      width: 83.33333333%;
  } */
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }
  label {
    font-weight: normal;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
  }
  .form-group .pdt3px {
    padding-top: 3px;
  }
  .b-b {
    border-bottom: 1px solid #dddddd;
  }
  .line-dashed {
    border-style: dashed !important;
    background-color: transparent;
    border-width: 0;
  }
  .line-lg {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .line {
    width: 100%;
    height: 2px;
    margin: 10px 0;
    font-size: 0;
    overflow: hidden;
  }
  table {
    background-color: transparent;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }
  .i-checks {
    padding-left: 0;
    margin-right: 15px;
    cursor: pointer;
    color: #666666;
  }
  .radio-inline, .checkbox-inline {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
  }
  .panel-body tr {
    padding: 0 15px;
  }
</style>
